<template>
    <text class="status-badge" :class="getStatusClass">{{ getStatusText }}</text>
  </template>
  
  <script>
  export default {
    name: 'StatusBadge',
    props: {
      status: {
        type: String,
        required: true
      },
      type: {
        type: String,
        default: 'enrollment' // enrollment, exam, material, study
      }
    },
    computed: {
      getStatusText() {
        const statusMaps = {
          enrollment: {
            'pending': '待提交材料',
            'reviewing': '审核中',
            'approved': '已通过',
            'rejected': '已拒绝'
          },
          exam: {
            'upcoming': '即将开始',
            'ongoing': '进行中',
            'completed': '已结束',
            'cancelled': '已取消'
          },
          material: {
            'pending': '待审核',
            'approved': '已通过',
            'rejected': '已拒绝'
          },
          study: {
            'not_started': '未开始',
            'in_progress': '进行中',
            'completed': '已完成'
          },
          registration: {
            'pending': '待审核',
            'approved': '已通过',
            'rejected': '已拒绝',
            'completed': '已完成'
          }
        };
        
        return statusMaps[this.type][this.status] || this.status;
      },
      getStatusClass() {
        const classPrefix = `status-${this.type}-`;
        return `${classPrefix}${this.status}`;
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .status-badge {
    display: inline-block;
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
  }
  
  /* 报名状态 */
  .status-enrollment-pending {
    background-color: #fff7e6;
    color: #e6a23c;
  }
  
  .status-enrollment-reviewing {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  .status-enrollment-approved {
    background-color: #e6f7f0;
    color: #52c41a;
  }
  
  .status-enrollment-rejected {
    background-color: #fff3f3;
    color: #f56c6c;
  }
  
  /* 考试状态 */
  .status-exam-upcoming {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  .status-exam-ongoing {
    background-color: #fff7e6;
    color: #e6a23c;
  }
  
  .status-exam-completed {
    background-color: #e6f7f0;
    color: #52c41a;
  }
  
  .status-exam-cancelled {
    background-color: #fff3f3;
    color: #f56c6c;
  }
  
  /* 材料状态 */
  .status-material-pending {
    background-color: #fff7e6;
    color: #e6a23c;
  }
  
  .status-material-approved {
    background-color: #e6f7f0;
    color: #52c41a;
  }
  
  .status-material-rejected {
    background-color: #fff3f3;
    color: #f56c6c;
  }
  
  /* 学习状态 */
  .status-study-not_started {
    background-color: #f0f0f0;
    color: #999;
  }
  
  .status-study-in_progress {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  .status-study-completed {
    background-color: #e6f7f0;
    color: #52c41a;
  }
  
  /* 考试报名状态 */
  .status-registration-pending {
    background-color: #fff7e6;
    color: #e6a23c;
  }
  
  .status-registration-approved {
    background-color: #e6f7f0;
    color: #52c41a;
  }
  
  .status-registration-rejected {
    background-color: #fff3f3;
    color: #f56c6c;
  }
  
  .status-registration-completed {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  </style>